<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <div class="s-car"></div>
    <div class="header"></div>

    <div class="s-addsec">
        <p>添加成功</p>
        <div class="s-secon">
            <div class="s-seconleft">

            </div>
            <div class="s-seconright">
                <h3>mingcheng</h3>
                <p>jiaqian</p>
            </div>
        </div>
        <p class="s-p2">
            <!-- 购物车中共有 <span> 1 </span>种商品，合计：  <span>￥64</span>  -->
        </p>
        <p> <a href="javascript:;" class="s-zgg">再逛逛</a>
            <a href="car.html"><button>去结算</button> </a>
        </p>
        <p class="s-coushu"></p>
    </div>
    <!-- <div class="header"></div> -->


    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>

    <script src="../js/ajax.js"></script>
    <script src="../js/detail.js"></script>

    <!-- <p id="ww"  style="height: 100px; width: 50px;  background-color: aqua;  margin:  0 auto;">8888888</p> -->
    <div class="s-pos">
        <div class="s-poscon">
            <img src="../images/ico_home.gif" alt="">
            当前位置： 首页 > 中西药品 ><span></span>

        </div>
    </div>
    <div class="s-pro">
        <div class="s-procon">
            <div class="s-proleft">
                <section class="s-lefts1"></section>
                <section class="s-lefts2"></section>
            </div>
            <div class="s-promid">
                <!-- 插入大图 -->
                <p class="s-midp1"></p>
                <p class="s-midp2"></p>
                <!-- <img src="" alt="" >
                <img src="" alt="" > -->

            </div>
            <div class="s-proright">
                <p class="s-yname">
                    <!-- 药品名 -->
                </p>
                <p class="s-yprice">
                    <!-- 价钱 -->
                </p>
                <div>
                    <!--购买数量 <input type="text" value="1"  id="s-num"> -->
                    <button class="s-sum">1</button>
                    <ul>
                        <li class="s-add"><img src="../images/bag_open.gif" alt=""></li>
                        <li class="s-sub"> <img src="../images/bag_close.gif" alt=""></li>
                    </ul>

                    （商品库存 ：50）
                </div>
                <button class="s-shop">
                    <b class="iconfont  icon-entertainmentmark
            "></b> 加入购物车
                </button>
                <button>
                    <b class="iconfont icon-xiangkan"></b> 收藏商品
                </button>
                <ul class="s-com">
                    <li> <b class="iconfont icon-entertainmentmark
                "></b> 已售 0 件</li>
                    <li> <b class="iconfont icon-message"></b> 评价 0 人次</li>
                    <li> <b class="iconfont icon-mark"></b>关注度 0</li>
                </ul>

            </div>
        </div>
    </div>

    <!-- 选项卡 -->
    <div class="s-chose">
        <ul>
            <li class="s-on">产品描述：</li>
            <li>规格参数</li>
            <li>用户评价</li>
            <li class="noborder">销售记录</li>
        </ul>
    </div>
    <div class="s-big clean">
        <div class="s-descri s-active">
            <!-- 药品描述 -->

            aaaaa
        </div>
        <div class="s-para     clean">
            <div class="s-word clean">
                <p>规格参数</p>
                <hr>
            </div>
            <div class="s-mes">
                <!-- <ul>
                    <li>商品货号 ： <span></span>
                    </li>
                    <li>商品品牌 ： <span>啊啊啊</span>
                    </li>
                    <li>商品重量 ：<span></span>
                    </li>
                </ul>
                <ul>
                    <li>上架时间 ： <span></span>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="s-comment">
            <p>用户评价 <span> （ 共<i>0</i>条评论 ）</span> </p>
            <div class="s-comment-o">
                <p>暂时还没有任何用户评价</p>
                <hr>
                <p>
                    <button>上一页</button>
                    <button>下一页</button>
                    , 共一页 。
                </p>

            </div>
            <p>我要评论</p>
            <div class="s-comment-t">
                <div class="s-comment-tcon">
                    <p>评价等级：</p>
                    <p>
                        <label>
                            <input name="s-star" type="radio" value="1" id="s-star1">
                            <img src="../images/stars1.gif" alt="">
                        </label>
                        <label>
                            <input name="s-star" type="radio" value="1" id="s-star2">
                            <img src="../images/stars2.gif" alt="">
                        </label>
                        <label>
                            <input name="s-star" type="radio" value="1" id="s-star3">
                            <img src="../images/stars3.gif" alt="">
                        </label>
                        <label>
                            <input name="s-star" type="radio" value="1" id="s-star4">
                            <img src="../images/stars4.gif" alt="">
                        </label>
                        <label>
                            <input name="s-star" type="radio" value="1" id="s-star5">
                            <img src="../images/stars5.gif" alt="">
                        </label>
                    </p>
                    <p>评价内容：</p>
                    <textarea name="" id="" cols="30" rows="10"></textarea>

                    <p>验证码：</p>
                    <div>
                        <input type="text">
                        <div class="s-yzm">
                            <!-- 随机数 -->

                        </div>
                    </div>

                    <button>提交点评</button>
                </div>

            </div>

        </div>
        <div class="s-sale">
            <p>购买记录 <span>（近期成交数量<i>0</i>条评论） </span></p>
            &nbsp;&nbsp;&nbsp;还没有人购买过此产品

            <p>总计 0 个记录， 共一页。
                <span>第一页</span>
                <span>上一页</span>
                <span>下一页</span>
                <span>最末页</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
            </p>
        </div>


    </div>
    <a href="" id=""></a>
  
    <!-- <div class="s-history">
        <div class="s-historycon"> -->
            <!-- <div>
                <img src="" alt="">
                <p></p>
                <p></p>
                <p></p>

            </div> -->
        <!-- </div>

    </div> -->
    <div class="footer"></div>

    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <script src="../js/detail.js"></script>
    <script src="../js/ajax.js"></script>

    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <script>
        $('.s-chose').find('li').click(function () {
            $(this).addClass('s-on').siblings().removeClass('s-on')


            // index
            let index = $(this).index()

            $('.s-big>div').eq(index).addClass('s-active').siblings().removeClass('s-active')


        })
        //参数动态
        $('.s-mes').find('li').eq(1).find('span').mouseenter(function () {
            $(this).css({
                color: '#FF6700'
            })
        })
        $('.s-mes').find('li').eq(1).find('span').mouseleave(function () {
            $(this).css({
                color: ''
            })
        })
        //评论动态
        $('.s-comment').find('button').mouseenter(function () {
            $(this).css({
                background: '#f5f5f5'
            })
        })
        $('.s-comment').find('button').mouseleave(function () {
            $(this).css({
                background: 'white'
            })
        })
        $('.s-comment').find('button').eq(2).mouseenter(function () {
            $(this).css({
                background: '#FF6700'
            })
        })
        $('.s-comment').find('button').eq(2).mouseleave(function () {
            $(this).css({
                background: '#FF6700'
            })
        })
        $('.s-yzm').css({
            background: 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')'
        })


        //销售记录动态
        $('.s-sale').find('span').mouseenter(function () {
            $(this).css({
                color: "#FF6700"
            })
        })
        $('.s-sale').find('span').mouseleave(function () {
            $(this).css({
                color: ""
            })
        })
        $('.s-midp2').css({
            display: 'none'
        })
        $('.s-proleft section').css('border', '1px solid #666')
        $('.s-lefts1').css('border', '1px solid #FF6700')
        $('.s-lefts2').mouseenter(function () {
            $('.s-midp1').css({
                display: 'none'
            })
            $('.s-midp2').css({
                display: 'block'
            })


        })
        $('.s-proleft section').mouseenter(function () {

            $(this).css('border', '1px solid #FF6700').siblings().css('border', '1px solid #666')

        })
        $('.s-lefts1').mouseleave(function () {



        })
        $('.s-lefts1').mouseenter(function () {
            $('.s-midp1').css({
                display: 'block'
            })
            $('.s-midp2').css({
                display: 'none'
            })
        })
        $('.s-shop').click(function () {

            $('.s-addsec').css({
                display: "block"
            })
        })
        $('.s-zgg').click(function () {
            $('.s-addsec').css({
                display: "none"
            })
        })
    </script>







    <script src="../js/ajax.js"></script>
    <script>

        // console.log(window.location.search)

        function queryString(attr) {
            let n = window.location.href.indexOf('?')
            let arr = window.location.href.slice(n + 1).split('&')
            let obj = {}


            arr.forEach(function (ele, index) {
                obj[ele.split('=')[0]] = ele.split('=')[1]
            })

            return obj[attr]
        }

        // console.log()

        // let oMedia = document.querySelector('.media')
        pAjax({
            url: '../server/detail.php',
            data: {
                id: queryString('id') - 0 
                // localStorage.getItem('detailId') - 0
            }
        }).then(function (res) {
            let json = JSON.parse(res)
            console.log(json)

            var sPos = document.querySelector('.s-poscon span')
            sPos.innerHTML = ` ${json.title}`

            var sLefts1 = document.querySelector('.s-lefts1')
            var sLefts2 = document.querySelector('.s-lefts2')
            sLefts1.innerHTML = `<img src="${json.img1}" alt="" >`
            sLefts2.innerHTML = `<img src="${json.img2}" alt="" >`
            var sMidp1 = document.querySelector('.s-midp1')
            // sMidp1.style.display='none'
            var sMidp2 = document.querySelector('.s-midp2')

            sMidp1.innerHTML = `<img src="${json.img1}" alt="" >`
            sMidp2.innerHTML = `<img src="${json.img2}" alt="" >`
            var sYname = document.querySelector('.s-yname')
            sYname.innerHTML = `${json.title}`
            var sYprice = document.querySelector('.s-yprice')
            sYprice.innerHTML = ` <a href=""  id="${json.id}">￥${json.price}</a>`
            var sDes = document.querySelector('.s-descri')

            sDes.innerHTML = `
        <img src="${json.img1}" alt=""> <img src="${json.img2}" alt="">`
            var sMes = document.querySelector('.s-mes')
            sMes.innerHTML = `
    <ul>
                    <li>商品货号 ： <span>${json.huohao}</span>
                    </li>
                    <li>商品品牌 ： <span>${json.pinpai}</span>
                    </li>
                    <li>商品重量 ：<span>${json.zhongliang}</span>
                    </li>
                </ul>
                <ul>
                    <li>上架时间 ： <span>${json.shijian}</span>
                    </li>
                </ul>`

        //     var sHis = document.querySelector('.s-historycon')
        //     sHis.innerHTML = `
        // <div>
        //         <img src="${json.img1}" alt="">
        //         <p>${json.title}</p>
        //         <p>￥${json.price}</p>
        //         <p>0人评价</p>

        //     </div>


        // `
            var sSeconleft = document.querySelector('.s-seconleft')
            sSeconleft.innerHTML = `<img src="${json.img1}" alt="">`
            var sSrighth = document.querySelector('.s-seconright h3')
            sSrighth.innerHTML = `${json.title}`
            var sSrightp = document.querySelector('.s-seconright p')
            sSrightp.innerHTML = `￥${json.price}`
            var sSp2 = document.querySelector('.s-p2')
            sSp2.innerHTML = `购物车中共有 <span> 1 </span>种商品，合计：  <span class="ppp">￥${json.price}</span>`
            var sSto = document.querySelector('.s-coushu')
            sSto.innerHTML = `${json.price}`
        })


  





    </script>
</body>

</html>